<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="referrer" content="origin">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/static/img/touxiang.ico">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">    <link rel="stylesheet" href="/static/css/monokai_sublime.min.css">
    <link rel="stylesheet" href="/static/css/signin.css">
    <link rel="stylesheet" href="/static/css/monokai_sublime.min.css">
    <link href="/static/css/magnific-popup.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/screen.css">
    <link rel="stylesheet" href="/static/css/share_style0_24.css">
    <style id="fit-vids-style">.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>
    <title>{% block blog-title %}Green{% endblock %}</title>
</head>
<body class="home-template">
    <header class="main-header" style="background-image: url(/static/img/fcb3879e14429d75833a461572e64.jpg)">
    </header>
    <nav class="main-navigation">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar-header">
                        <span class="nav-toggle-button collapsed" data-toggle="collapes" data-target="#main-menu">
                        <span class="sr-only">Toggle navigation</span>
                        <i class="fa fa-bars"></i>
                        </span>
                    </div>
                    <div class="collapse navbar-collapse" id="main-menu">
                        <ul class="menu">
                            <li role="presentation"><a href="/">博客首页</a></li>
                            <li role="presentation"><a href="/about">关于</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    {% block ghost-content %}
    <section class="content-wrap">
        <div id ='top' class="container">
            <div class="row">
                <main class="col-md-8 main-content">
                    {% block ghost-article  %}
                    {% for item in articles %}
                    <article id ='97' class="post">
                        <div class="post-head">
                            <h1 class="post-title"><a href="{% url 'blog_article_single' slug=item.id %}">{{ item.title }}</a></h1>
                            <div class="post-meta">
                                <span class="author">标签：{{ item.categories.get }}</span>
                                <span class="author">阅读量：{{ item.read_num }}</span>
                                <time class="post-date">发布时间：{{ item.date_publish|date:"SHORT_DATE_FORMAT" }}</time>
                            </div>
                        </div>
                        <div class="post-content">
                            <p>{{ item.content_markup|truncatewords_html:20|safe}}</p>
                        </div>
                        <div class="post-permalink">
                            <a href="{% url 'blog_article_single' slug=item.id %}" class="btn btn-default">阅读全文</a>
                        </div>
                    </article>
                    {% endfor %}
                    <nav class="pagination" role="navigation">
                        {% for page in pages %}
                            <span class="page-number"><a href="?page={{ page }}">{{ page }}</a></span>
                        {% endfor %}
                    </nav>
                    {% endblock %}
                </main>

                {% block blog-aside %}
                <aside class="col-md-4 sidebar">
                    {% block ghost-icon %}
                    <div class="page-header">
                        <img data-src="holder.js/200x200" class="img-thumbnail" alt="200x200" src="/static/img/IMG_0538.JPG"  style="width: 200px; height: 200px;">
                    </div>
                    {% endblock %}
                    <div class="widget">
                        {% if request.session.user_name %}
                        <h4 class="title">{{ request.session.user_name }}</h4>
                        <div class="content download">
                            <a href="{% url 'sign_out' %}?next={{request.path}}" class="btn btn-default btn-block">退出</a>
                        </div>
                        {% else %}
                        <h4 class="title">登录</h4>
                        <div class="content download">
                            <a href="{% url 'sign_in' %}?next={{request.path}}" class="btn btn-default btn-block">注册/登录</a>
                        </div>
                        {% endif %}
                    </div>

                    <div class="widget">
                        <h4 class="title">标签云</h4>
                        <div class="content tag-cloud">
                            {% for tmp in categories %}
                            <a href="{% url 'blog_category_archive' slug=tmp.id %}">{{ tmp.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="list-group">
                        <li class="list-group-item ">
                            阅读排行
                        </li>
                        {% for article in articles|dictsortreversed:"read_num"|slice:":5" %}
                        {# dictsortreversed根据关键字排序 #}
                        {# slice截取一部分 #}
                        <a href="{% url 'blog_article_single' article.id %}" class="list-group-item"><span class="badge">{{ article.read_num }}</span>{{ article.title|truncatechars:15 }}</a>
                        {% endfor %}
                    </div>

                </aside>
                {% endblock %}
            </div>
        </div>
    </section>
    {% endblock %}
    {% block blog-end %}
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <span><a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备16019963号</a></span>
                    <span></span>
                </div>
            </div>
        </div>
    {% endblock %}


    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/jquery.fitvids.min.js"></script>
    <script src="/static/js/highlight.min.js"></script>
    <script src="/static/js/jquery.magnific-popup.min.js"></script>
    <script src="/static/js/main.js"></script>

</body>
</html>
